<template>
	<!-- 自定义头部导航栏 -->
	<view class="navBar">
		<image class="imgGif" src="../../static/images/swiper/001.gif" mode=""></image>
		<view class="nav-box" :style="'background-color: rgba(2,187,142,'+opacity+');'">
			<button open-type="contact" class="kefu" :style='"padding:"+navHeight+"rpx 0;"'>
				<i class="icon iconfont icon-rengongkefu"></i>
				<text class="customer">客服</text>
			</button>
			<view class="recovery" :style='"top:"+headerHeight+"rpx;"'>
				<view>衣件宝智能回收</view>
			</view>
			<!-- <view style="color: red;">{{opacity}}</view> -->
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			opacity:{
				type: Number,
				default: '',
			},
		},
		data(){
			return{
				navHeight:0,//微信小程序导航栏高度
				headerHeight:0,//标题与顶部的距离
				// opacity:0,//透明度
			}
		},
		mounted() {
			this.getsystemInfo()
		},
		
		methods:{
			getsystemInfo(){//获取当前屏幕信息
				// 设备系统信息
				let sysInfo = uni.getSystemInfoSync()
				console.log(sysInfo)
				// 机型适配比例系数
				let scaleFactor = 750 / sysInfo.windowWidth
				// 当前机型屏幕高度
				let windowHeight = sysInfo.windowHeight * scaleFactor
				// 当前机型屏幕宽度
				let windowWidth = sysInfo.windowWidth * scaleFactor
				// 状态栏高度
				let statusBarHeight = (sysInfo.statusBarHeight) * scaleFactor
				// 导航栏高度(ps:只针对微信小程序有效)
				// let navHeight = 0
				// 微信小程序头部胶囊信息
				// #ifdef MP-WEIXIN
					const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
					// 胶囊高度
					let menuButtonHeight = menuButtonInfo.height * scaleFactor
					// 胶囊宽度
					let menuButtonWidth = menuButtonInfo.width * scaleFactor
					// 胶囊上边界的坐标
					let menuButtonTop = menuButtonInfo.top * scaleFactor
					// 胶囊右边界的坐标
					let menuButtonRight = menuButtonInfo.right * scaleFactor
					// 胶囊下边界的坐标
					let menuButtonBottom = menuButtonInfo.bottom * scaleFactor
					// 胶囊左边界的坐标
					let menuButtonLeft = menuButtonInfo.left * scaleFactor
					// 微信小程序：导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
					this.navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
					// console.log(this.navHeight)
					this.navHeight = this.navHeight - 30
					this.headerHeight = this.navHeight + 25
					// 
				// #endif
			}
		}
	}
</script>

<style scoped lang="scss">
	.navBar{
		// color: #fff;
		position: relative;
		box-sizing: border-box;
		height: 520rpx;
		// height: 38vh;
		// border: 1px solid #f00;
		border-radius: 0 0 20rpx 20rpx;
		// background: url("../../static/images/swiper/swiper01.jpg") 100% no-repeat;
		.imgGif{
			position: absolute;
			border-radius: 0 0 10rpx 10rpx;
			// border: 1px solid #f00;
		}
		.nav-box{
			z-index: 99999;
			width: 100%;
			position: fixed;
			button::after{
				border: 0;
			}
			.kefu{
				background: 0;
				border: 0;
				width: 200rpx;
				// height: 200rpx;
				// border: 1px solid #f00;
				margin: 0;
				margin-left: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center; /* 垂直方向居中对齐 */
				.icon-rengongkefu{
					display: inline-block;
					color: #fff !important;
				}
				.customer{
					font-size: 30rpx;
				}
			}
		}
		
		.recovery{
			position: absolute;
			left: 30%;
			font-size: 35rpx;
		}
	}
</style>